{% extends "base.html" %}
{% block extrahead %}
{% endblock %}

{% block content %}
<script type="text/javascript" src="/js/gears_init.js"></script>
<script type="text/javascript" charset="utf-8">
  
var images = [];

var api_url = "/api/2008/01/01/01/01/01/0/";

// for gears
// i am horrible at js, please bare with me.
var localServer =  {};
var resourceStore = {};
var gears_images_loaded = 0;

if (typeof google != "undefined") {
  var localServer = google.gears.factory.create('beta.localserver');
  var resourceStore = localServer.createStore('16x16Store');
}

function gearsLoad(images) {
  for(var i=0; i<images.length;i++){
    url = 'http://favicoop.com/image/' + images[i];
    //url = 'http://localhost:8080/image/' + images[i];
    if(!resourceStore.isCaptured(url)){
      resourceStore.capture(url, gearsCallBack);
    } else {
      gears_images_loaded++;
      var newImage = document.createElement('img');
      newImage.src = url;
      newImage.width = '16'
      newImage.height = '16'
      newImage.onload = onLoadClosure(newImage);
    }
  }
}

function gearsCallBack(url, success, captureId){
  if (success) {
    var newImage = document.createElement('img');
    newImage.src = url;
    newImage.width = '16'
    newImage.height = '16'
    newImage.onload = onLoadClosure(newImage);
  }
}

function getImages() {
  var the_object = {};
  var http_request = new XMLHttpRequest();
  http_request.open( "GET", api_url, true );
  http_request.onreadystatechange = function () {
    if ( http_request.readyState == 4 ) {
      if ( http_request.status == 200 ) {
        the_object = eval( "(" + http_request.responseText + ")" );
	api_url = the_object.next_url;
	if (typeof google != "undefined") {
	  gearsLoad(the_object.favicons);
	} else {
	  images = images.concat(the_object.favicons);
          loadImage(i);
          loadImage(++i);
          loadImage(++i);
          loadImage(++i);
          loadImage(++i);
          loadImage(++i);
	}
      } else {
      }
        http_request = null;
    }
  };
  http_request.send(null);
}

getImages();
window.setInterval(function(){ getImages(api_url); }, 1000 * 30);

var i = 0;
var j = 0;
var images_loaded = 0;

// for production favicoop
var domains = ['favicoop.com', 'www.favicoop.com', '16x16.appspot.com', '16x16.favicoop.com'];
// for running locally
// var domains = ['localhost:8080'];

function loadImage() {
  var newImage = document.createElement('img');
  if (!images[i]) return; 
  newImage.src = 'http://' + domains[j++ % domains.length] +'/image/' + images[i];
  newImage.width = '16'
  newImage.height = '16'
  newImage.onload = onLoadClosure(newImage);
}


function onLoadClosure(newImage) {
  return function(){
    i++;
    images_loaded++;
    document.getElementById('accesses_block').appendChild(this);
    document.getElementById('count').innerHTML = images_loaded;
    document.getElementById('gears_count').innerHTML = gears_images_loaded;
    loadImage(i);
  }
}

</script>

<div id="favicon_wrapper">
  <div id="stats">
  favicoop, a favicon collection | {{ favicon_cnt }} total | {{ favicon_today_cnt }} new today | {{ accesses_cnt }} accesses | {{ accesses_today_cnt }} accessed today | <a id="count">0</a> displayed | <a id="gears_count">0</a> <a href="http://gears.google.com/?action=install&message=favicoop uses google gears for ultra fast image loading. Give it a go if you want to refresh favicoop a lot!&return=http://favicoop.com/">from gears</a> 
  </div>
  <div id="accesses_block">
  </div>
</div>

{% endblock %}
